import React from "react";
import { useRouter } from "next/router";

export default function Blog(props: any) {
  // const router = useRouter();
  // console.log(router.query);
  console.log(props.user.id);
  if (!props.user.id) {
    return <p>加载中。。。</p>;
  }
  return (
    <>
      <ul>
        <li>用户ID:{props.user.id}</li>
        <li>用户名:{props.user.name}</li>
        <li>email:{props.user.email}</li>
      </ul>
    </>
  );
}

export async function getStaticProps(context: any) {
  const { params } = context;
  console.log(params);
  const data = await fetch(
    `https://jsonplaceholder.typicode.com/users/${params.id}`
  );
  const u = await data.json();
  return {
    props: {
      user: u,
    },
  };
}
export async function getStaticPaths(context: any) {
  const { params } = context;
  console.log(params);
  const data = await fetch(
    `https://jsonplaceholder.typicode.com/users/${params.id}`
  );
  const user = await data.json();
  return {
    paths: [
      {
        params: {
          id: user.id,
        },
      },
    ],
    fallback: true,
  };
}
